<template>
  <el-row>
    <!-- 头部 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <el-breadcrumb :separator-icon="ArrowRightBold">
          <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>开奖管理</el-breadcrumb-item>
          <el-breadcrumb-item>韩国快3</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
    </el-col>
    <div style="padding: 5px;"></div>
    <!-- 内容区域 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <template #header>
          <div style="display: flex; align-items: center;">
            <el-input style="width: 260px;" v-model="inputval" placeholder="请输入开奖期号" />
            <div style="padding: 5px;"></div>
            <el-button type="primary" :icon="Search" @click="inputSearch()">搜索</el-button>
          </div>
        </template>

        <!-- 表格 -->
        <el-table :data="tableData.list" :border="true" style="width: 100%">
          <el-table-column prop="id" label="序号" width="100" >
            <template #default="scope">
              <div style="font-weight: bold;">{{ scope.row.id }}</div>
            </template>
          </el-table-column>

          <el-table-column label="游戏类型">
            <template #default="scope">
              <el-tag>韩国快3</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="issue" label="开奖期号" >
            <template #default="scope">
              <div style="font-weight: bold;">{{ scope.row.issue }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="number" label="开奖号码" >
            <template #default="scope">
              <div style="font-size: 18px; text-align: center; font-weight: bold;">{{ scope.row.number }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="time" label="系统开奖时间" >
            <template #default="scope">
              <div style="font-weight: bold;">{{ scope.row.time }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" >
            <template #default="scope">
              <div style="font-weight: bold;">{{ scope.row.create_time }}</div>
            </template>
          </el-table-column>

          <el-table-column label="开奖状态" width="200">
            <template #default="scope">
              <el-tag v-if="scope.row.status == 1" type="danger" plain style="font-weight: bold;">进行中</el-tag>
              <el-tag v-if="scope.row.status == 2" type="success" plain style="font-weight: bold;">已开奖</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="订单操作" width="190">
            <template #default="scope">
              <el-button type="success" @click="manual_lottery(scope.row)">手动开奖</el-button>
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页 -->

        <div style="padding: 10px;"></div>
        <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                       :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
                       :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

      </el-card>
    </el-col>
  </el-row>

  <!-- 菜单权限管理 -->
  <el-dialog v-model="showDialog" title="手动开奖" center width="40%" :destroy-on-close="true">
    <el-form label-width="80px">

      <el-form-item label="开奖期号">
        <el-input v-model="formData.issue" :disabled="Boolean(formData.issue)" />
      </el-form-item>
      <el-form-item label="开奖号码">
        <div class="number_list">
          <el-input-number v-model="formData.numberArr[0]" :min="1" :max="6" />
          <el-input-number v-model="formData.numberArr[1]" :min="1" :max="6" />
          <el-input-number v-model="formData.numberArr[2]" :min="1" :max="6" />
        </div>
      </el-form-item>

    </el-form>

    <template #footer>
      <el-button type="primary" @click="formSubmit()">确定手动开奖</el-button>
    </template>
  </el-dialog>

</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, UserFilled, Search } from '@element-plus/icons-vue'

const showDialog = ref(false)
const tableData = reactive({ list: [] })
const formData = reactive({
  issue: '',
  numberArr: [0,0,0],
})

onMounted(() => {
  admin_aomen_issue()
})

function manual_lottery(item) {
  showDialog.value = true
  formData.issue = item.issue
  formData.type = item.type
  let number = []
  if(item.number){
    number = item.number.split(",");
  }
  formData.numberArr[0] = parseInt(number[0]) || 1
  formData.numberArr[1] = parseInt(number[1]) || 1
  formData.numberArr[2] = parseInt(number[2]) || 1
}

function formSubmit() {
  formData.number = formData.numberArr.toString()
  request_post('/admin_k3_manual_issue', formData).then((res) => {
    if (res.data.code == 200) {
      showDialog.value = false
      page.pagenum = 1
      admin_aomen_issue()
      return success(res.data.msg)
    } else {
      return error(res.data.msg)
    }
  })
}

// 搜索
const inputval = ref('')
function inputSearch() {
  if (inputval.value == '') {
    return error('请输入代理UID')
  }
  page.issue = inputval.value
  admin_aomen_issue()
}

// 获取用户列表
function admin_aomen_issue() {

  request_post('/k3_issue', page).then((res) => {
    if (res.data.code == 200) {
      tableData.list = res.data.data.data
      page.total = res.data.data.total
    } else {
      return error(res.data.msg)
    }
  })

}


const page = reactive({
  issue: '',
  pagenum: 1,
  type:1,
  pagesize: 18,
  total: 0
})

function handleSizeChange(val) {
  page.pagenum = val
  admin_aomen_issue()
}
function handleCurrentChange(val) {
  page.pagenum = val
  admin_aomen_issue()
}


</script>

<style>
.number_list{
  display: flex;
  align-items: center;
}
.number_list .el-input-number{
  width: 100px;
  margin-right: 15px;
}

</style>
